<style>
  #app{
    width: 100%;
    min-width: 1200px;
    height: 100vh;
    min-height: 500px;
  }
  .left-box{
    float: left;
    width: 2.5rem;
    height: 100vh;
    background: #fff;
    box-shadow: 0 0.05rem .13rem rgba(0,0,0,0.17);
    position: relative;
    box-sizing: border-box;
  }
  .logo-box{
    position: relative;
    width: 100%;
    height: 2rem;
  }
  .logo{
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%,-50%);
    width: 48%;
    height: 39%;
    background: url("./assets/images/logo.png");
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .link-box{
    width: 1.06rem;
    margin: 0 auto;
    margin-bottom: .5rem;
  }
  .link-box li{
    width: 100%;
    height: .65rem;
    position: relative;
    cursor: pointer;
  }
  .menu-link{
    transition: all 0.3s;
    position: relative;
    display: block;
    width: 100%;
    line-height: .21rem;
    font-size: .16rem;
    color:#454545;
    text-align: center;
  }
  .menu-link.active{
    color:#000;
  }
  .link-box li:hover .menu-link:before,.menu-link.active:before{
    content:'';
    position: absolute;
    width: 30%;
    height: 1px;
    background: #000;
    left: -22%;
    top: .11rem;
  }
  .link-box li:hover .menu-link,.menu-link.active{
    transform: translateX(20%);
  }
  .menu-line{
    width: 1px;
    height: 29vh;
    background: #414141;
    margin: 0 auto;
  }
  .menu-bottom{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 .28rem .3rem .28rem;
    box-sizing: border-box;
  }
  .menu-link-icon{
    width: 1.81rem;
    margin: 0 auto;
  }
  .menu-link-icon a{
    float: left;
    display: block;
    margin-left:.35rem;
    width: .19rem;
  }
  .menu-link-icon a:nth-child(1){
    margin-left: 0;
  }
  .menu-link-icon a img{
    width: 100%;
  }
  .copy-right{
    margin-top: .26rem;
    text-align: center;
    color:#A8A8A8;
    font-size: .12rem;
  }
  .main-box{
    float: left;
    height: 100vh;
    width: 16.7rem;
    overflow-y: auto;
  }
  .cover{
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 99999;
    position: fixed;
    left: 0;
    top: 0;
  }
  .cover img{
    width: 296px;
    height:167px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
	.wechat-qrCode{
		position: absolute;
		left: 50%;
		bottom:1.1rem;
		width:2rem;
		height:2rem;
		border-radius:.1rem;
		background:#fff;
		box-shadow:0 0 .1rem rgba(0,0,0,0.1);
		transform:translateX(-50%);
		/* transition:all 0.3s; */
		display: none;
		/* opacity: 0; */
	}
	.menu-link-icon a:nth-child(2):hover .wechat-qrCode{
		display: block;
		animation: show linear 0.3s forwards;
	}
	@keyframes show{
		0%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}
	.menu-link-icon a .wechat-qrCode img{
		position: absolute;
		width: 1.7rem;
		height: 1.7rem;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.wechat-qrCode:after{
		content:'';
		display:block;
		/* background: #f00; */
		position: absolute;
		width: .3rem;
		height:.3rem;
		bottom: -.3rem;
		left:.6rem;
	}
	
</style>
<template>
  <div id="app clear">
    <div class="left-box">
      <div class="logo-box">
        <router-link class="logo" :to="index"></router-link>
      </div>
      <div class="link-box">
        <ul>
          <li v-for="(item,index) in rootData.menuList" :key="index" @click="changeMenuActive(index)">
            <router-link :to="item.path"
                         v-html="item.name"
                         :class="{'active':rootData.activeMenu==index}"
                         class="menu-link" >
            </router-link>
          </li>
        </ul>
      </div>
      <div class="menu-line"></div>
      <div class="menu-bottom">
        <div class="menu-link-icon clear">
          <a v-for="(item,index) in rootData.shareLinks"
             :href="item.link"
             :key="index">
						 <div class="wechat-qrCode" v-if="index==1">
						 					 <img :src="rootData.qrCode" alt="">
						 </div>
            <img :src="item.icon" alt="">
          </a>
        </div>
        <div class="copy-right">
          Copyright &#169 2018-2019 Vince
        </div>
				 
      </div>
    </div>
    <div class="main-box">
      <router-view></router-view>
    </div>
    <div class="cover" v-if="coverFlag">
      <img :src="path" alt="">
    </div>
  </div>
</template>

<script>
  import * as rem from './assets/js/rem'
  import rootData from './assets/js/dataConfig'
export default {
  name: 'app',
  components: {

  },
  data(){
    return{
      index:'/',
      coverFlag:rootData.coverFlag,
      rootData,
      path:require('./assets/images/loading.gif')
    }
  },
  mounted(){
    if(this.isPC()){
      rem.setRem(1920)
      this.coverFlag=false
    }
    else{
      //this.$router.push({path:'http://www.baidu.com'})
      window.location.href='http://www.baidu.com'
    }
  },
  methods:{
    changeMenuActive(index){
      this.rootData.activeMenu=index
      this.rootData.menuList.forEach(val=>{
        val.name=val.LowerName
      })
      this.rootData.menuList[index].name=this.rootData.menuList[index].UpperName
      this.$router.push({path:this.rootData.menuList[index].path})
    },
    isPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    }
  }
}
</script>


